<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>头像设置 - 会员中心 -{$sitename}</title>
{include file="center_include"/}
<link rel="stylesheet" type="text/css" href="{$apicss}admin/uploadify/jquery.Jcrop.min.css" media="all">
<link rel="stylesheet" type="text/css" href="{$apicss}admin/uploadify/uploadify.css" media="all">
<script type="text/javascript" src="{$apicss}admin/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript" src="{$apicss}admin/uploadify/jquery.Jcrop.min.js"></script>
<style>
.col-right{ float:left; }
.col-auto .col-right{ width:200px; margin-left:10px}
</style>
</head>
<body>
{include file="center_header"/}
<!-- // i-header end -->
<div id="content" class="layout">
  <div class="ui-box ui-qire fn-clear" id="i-box">
    <div id="i-bar">
 {include file="center_nav"/}     
 {include file="center_fk"/}
    </div>
    <!-- // i-bar end -->
    <div class="i-box-cnt" id="i-cnt">
      <div id="i-avatar">
        <div class="ui-title i-tab-nav-box">
            <ul class="i-tab-nav fn-clear">
              <li><a href="{:zanpian_user_url('user/center/info')}" hidefocus="">基本资料</a></li>
              <li class="line"></li>
              <li><a href="{:zanpian_user_url('user/center/email')}" hidefocus="">订阅设置</a></li>
              <li class="line"></li>
              <li class="current"><a href="{:zanpian_user_url('user/center/avatar')}" hidefocus="">头像修改</a></li>
              <li class="line"></li>              
              <li><a href="{:zanpian_user_url('user/center/pwd')}" hidefocus="">修改密码</a></li>
            </ul>
        </div><br />
        <div class="tbmov-notice"> 上传成功后，刷新页面便可以看到头像 </div>
        <div class="ui-form fn-clear">
        <div class="user-upload"><form   method="post" id="pic" class="update-pic cf" onSubmit="return false;">
	<div class="upload-area">
		<input type="file" id="user-pic">
		<div class="file-tips">支持JPG,PNG,GIF，图片小于1MB，尺寸不小于100*100,真实高清头像更受欢迎！</div>
		<div class="preview hidden" id="preview-hidden"></div>
	</div>
	<div class="preview-area">
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<input type="hidden" id='img_src' name='src'/>
		<div class="tcrop">头像预览</div>
		<div class="crop crop150"><img id="crop-preview-150" src=""></div>
		<div class="crop crop80"><img id="crop-preview-80" src=""></div>
        <div class="crop crop45"><img id="crop-preview-45" src=""></div>
		<a class="uppic-btn save-pic" href="javascript:;" id="save-pic">保存</a>
		<a class="uppic-btn reupload-img" href="javascript:$('#user-pic').uploadify('cancel','*');">重新上传</a>
	</div>
</form></div>

        </div>
        <!-- // ui-form end -->
      </div>
      <!-- // ui-box End -->
    </div>
    <!-- // i-cnt End -->
  </div>
  <!-- // maxBox End -->
</div>
<script type="text/javascript">
	$(function(){
		//上传头像(uploadify插件)
		$("#user-pic").uploadify({
			'queueSizeLimit' : 1,
			'removeTimeout' : 0.5,
			'preventCaching' : true,
			'multi'    : false,
			'swf' 			: '{$apicss}admin/uploadify/uploadify.swf',
			'uploader' 		: '{:zp_url('user/upload/uploadImg')}',
			'buttonText' 	: '<i class="userup-icon"></i>上传头像',
			'width' 		: '200',
			'height' 		: '200',
			'fileObjName'   : 'file',
			'formData'      : {'session_key':'{$session_key}','session_id':'{$session_id}'},
			'fileTypeExts'	: '*.jpg; *.png; *.gif;',
			'onUploadSuccess' : function(file, data, response){
				var data = $.parseJSON(data);
				if(data['status'] == 0){
					 $.showfloatdiv({txt: data['info']}), $.hidediv({})
					return;
				}
				var preview = $('.upload-area').children('#preview-hidden');
				preview.show().removeClass('hidden');
				//两个预览窗口赋值
				$('.crop').children('img').attr('src',data['data']+'?random='+Math.random());
				$('#avatar').attr('src',data['data']+'?random='+Math.random());
				//隐藏表单赋值
				$('#img_src').val(data['data']);
				//绑定需要裁剪的图片
				var img = $('<img />');
				preview.append(img);
				preview.children('img').attr('src',data['data']+'?random='+Math.random());
				var crop_img = preview.children('img');
				crop_img.attr('id',"cropbox").show();
				var img = new Image();
				img.src = data['data']+'?random='+Math.random();
				//根据图片大小在画布里居中
				img.onload = function(){
					var img_height = 0;
					var img_width = 0;
					var real_height = img.height;
					var real_width = img.width;
					if(real_height > real_width && real_height > 200){
						var persent = real_height / 200;
						real_height = 200;
						real_width = real_width / persent;
					}else if(real_width > real_height && real_width > 200){
						var persent = real_width / 200;
						real_width = 200;
						real_height = real_height / persent;
					}
					if(real_height < 200){
						img_height = (200 - real_height)/2;	
					}
					if(real_width < 200){
						img_width = (200 - real_width)/2;
					}
					preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
					preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});			
				}
				//裁剪插件
				$('#cropbox').Jcrop({
		            bgColor:'#333',   //选区背景色
		            bgFade:true,      //选区背景渐显
		            fadeTime:1000,    //背景渐显时间
		            allowSelect:false, //是否可以选区，
		            allowResize:true, //是否可以调整选区大小
		            aspectRatio: 1,     //约束比例
		            minSize : [200,200],//可选最小大小
		            boxWidth : 200,		//画布宽度
		            boxHeight : 200,	//画布高度
		            onChange: showPreview,//改变时重置预览图
		            onSelect: showPreview,//选择时重置预览图
		            setSelect:[ 0, 0, 200, 200],//初始化时位置
		            onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
			            $('#x').val(c.x);//需裁剪的左上角X轴坐标
			            $('#y').val(c.y);//需裁剪的左上角Y轴坐标
			            $('#w').val(c.w);//需裁剪的宽度
			            $('#h').val(c.h);//需裁剪的高度
		          }
		        });
				//提交裁剪好的图片
				$('.save-pic').click(function(){						 
					if($('#preview-hidden').html() == ''){
						$.showfloatdiv({txt: '请先上传图片！'}), $.hidediv({})
					}else{
						$.showfloatdiv({txt: '图片处理中，请稍候……',cssname: 'loading'}), $.hidediv({})
						$('#pic').submit();
					}
				});
				//重新上传,清空裁剪参数
				var i = 0;
				$('.reupload-img').click(function(){
					$('#preview-hidden').find('*').remove();
					$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
				});
		     }
		});
		//预览图
		function showPreview(coords){
			var img_width = $('#cropbox').width();
			var img_height = $('#cropbox').height();
			  //根据包裹的容器宽高,设置被除数
			  var rx = 150 / coords.w;
			  var ry = 150 / coords.h; 
			  $('#crop-preview-150,#avatar').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
			  rx = 80 / coords.w;
			  ry = 80 / coords.h;
			  $('#crop-preview-80').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
			  rx = 45 / coords.w;
			  ry = 45 / coords.h;
			  $('#crop-preview-45').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });			  
		}
	})
	$('form').on('submit',function(e){
		$($(this)).qiresub({
			curobj:$("form"),
			txt:'数据提交中,请稍后...',
			onsucc:function(result){
				//$.showfloatdiv({offset:$("#register").offset(),txt:'成功注册'});
				$.hidediv(result);
				//alert(result.msg);
			}
		})
		.post({
		 url : "{:zp_url('user/upload/cropImg')}"
		});
	});
	
</script>
<!-- // wrap End -->
<!-- // footer end -->
{include file="footer"/}
</body>
</html>